import { udp, useAsyncEffect } from '@cscec/udp-mobile-ui';
import {
  Grid,
} from 'antd-mobile';
import { useState } from 'react';
import styles from './index.less'
import { getList, queryDetail } from './service';
import { FootToolbar } from '@/components/footToolbar';
import BellaHeader from '@/components/header';
import { Card, } from 'antd';
import Meta from 'antd/es/card/Meta';
import { RightCircleFilled, PlayCircleOutlined } from '@ant-design/icons';
import ProgressiveImage from '@/components/ProgressiveImage';


const TextbookPage = () => {
  // 课程数据
  const [courses, setCourses] = useState<any>([]);
  const [textbooklist, settextbooklist] = useState<any>([])
  const [textbook, settextbook] = useState<any>({})
  const bookData = localStorage.getItem('text_book')
  const { typeCode } = udp.getQueryValue()

  useAsyncEffect(async () => {

    if (bookData) {
      const textData = JSON.parse(bookData)
      settextbook(textData)
      setCourses(textData?.unitList)
      return
    }
    const res = await getList({ pageIndex: 1, pageSize: 999, type_code: typeCode })
    settextbooklist(res?.record)
    settextbook(res?.record[0])
    if (res.record.length > 0) {
      const result = await queryDetail({ id: res?.record[0].id })
      if (result) {
        localStorage.setItem('text_book', JSON.stringify(result));
        setCourses(result?.unitList)
      }
    }

  }, [])
  useAsyncEffect(async () => {
    const res = await getList({ pageIndex: 1, pageSize: 999, type_code: typeCode })
    settextbooklist(res?.record)
  }, [])

  // 单词消消乐按钮点击事件
  // const handleGameClick = () => {
  //   // 这里可以添加跳转逻辑，比如：
  //   udp.open('/WordGame');
  // };

  return (
    <div className={styles["textbook-container"]}>
      {/* 头部 */}
      <BellaHeader title="教材选择" />
      {/* 主要内容区域 */}
      <main className="main-content">
        <Grid columns={2} gap={12} style={{ marginTop: "10px" }}>
          {textbooklist.map(feature => (
            <Grid.Item key={feature.id}>
              <Card
                className={`${styles['feature-card']} ${feature.title === 'kb' ? 'kb-card' : ''}`}
                cover={
                  <div className={styles["box"]}>
                    <div className={styles["basic-tag"]}>{feature.studyFlag == 1 ? '上次学习' : ''}</div>
                    <ProgressiveImage
                      style={{ height: '200px', objectFit: 'cover',width:'100%' }}
                      //fit="cover"
                      src={feature?.imgUrl} />
                  </div>
                }
                onClick={() => {
                  udp.open('/Selection', { id: feature.id, name: feature.name, imgurl: feature.imgUrl })
                }}
              >
                <Meta title={feature?.name} avatar={<RightCircleFilled style={{ color: '#1EB7D8', fontSize: '25px' }} />} />
              </Card>
            </Grid.Item>
          ))}
        </Grid>
      </main>

      {/* 单词消消乐按钮 - 固定在右下角 */}
      <div
        style={{
          position: 'fixed',
          right: '16px',
          bottom: '80px',
          zIndex: 1000,
        }}
      >

        {/* <div
    onClick={handleGameClick}
    style={{
      background: 'linear-gradient(135deg, #FF6B8B 0%, #FF5252 100%)',
      border: 'none',
      borderRadius: '25px',
      padding: '12px 20px',
      color: 'white',
      fontWeight: 'bold',
      fontSize: '14px',
      boxShadow: '0 4px 15px rgba(255, 107, 139, 0.4)',
      display: 'flex',
      alignItems: 'center',
      gap: '8px',
      animation: 'gamePulse 2s infinite',
      cursor: 'pointer',
      transition: 'all 0.3s ease',
      userSelect: 'none',
    }}
    className={styles.gameButton}
    onMouseEnter={(e) => {
      e.currentTarget.style.transform = 'scale(1.05)';
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.transform = 'scale(1)';
    }}
    onMouseDown={(e) => {
      e.currentTarget.style.transform = 'scale(0.95)';
    }}
    onMouseUp={(e) => {
      e.currentTarget.style.transform = 'scale(1.05)';
    }}
  >
    <PlayCircleOutlined 
      style={{ 
        fontSize: '18px',
        transform: 'rotate(-10deg)',
        transition: 'transform 0.3s ease'
      }}
      className={styles.gameIcon}
    />
    <span>单词消消乐</span>
  </div> */}
      </div>

      <FootToolbar />
    </div >
  );
};

export default TextbookPage